<template>
  <div class="parameters">
    <!-- 头部搜索 -->
    <el-form :inline="true" :model="listFrom" class="demo-form-inline">
      <el-form-item label="订单编号">
        <el-input v-model="listFrom.id" placeholder="输入要查询订单编号" />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="listFrom.phone" placeholder="输入要查询手机号" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch" :icon="Search"
          >查询</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-popconfirm
          title="此操作不可逆，确定要删除所选床位吗?"
          @confirm="onDelete()"
        >
          <template #reference>
            <el-button type="info">删除选中</el-button>
          </template>
        </el-popconfirm>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column property="id" label="订单编号" />
      <el-table-column property="name" label="患者姓名" />
      <el-table-column property="department" label="挂号科室" />
      <el-table-column property="further" label="是否为复诊" />
      <el-table-column property="48report" label="是否自我申报48小时核酸" />
      <el-table-column label="订单操作">
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            :icon="Document"
            @click="DetailAccount(scope.row.id)"
          />
          <el-popconfirm
            title="确定删除该账号吗?"
            @confirm="deleteAccount(scope.row.id)"
          >
            <template #reference>
              <el-button type="danger" size="small" :icon="Delete" />
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <div class="fenyeqi">
      <el-pagination
        v-model:current-page="listFrom.page"
        v-model:page-size="listFrom.size"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watchEffect } from "vue";
import { ElTable, ElMessage } from "element-plus";
import { Delete, Search, Document } from "@element-plus/icons-vue";
import { registerListReq } from "@/api/register.api";
const listFrom = reactive({
  page: 1,
  size: 10,
  id: null,
  phone: null,
});
// 表格数据
const tableData = ref([]);
// 总数
const total = ref(0);
// 单选框值
const handleSelectionChange = (val) => {
  console.log(val);
};
// 查询
const onSearch = () => {
  console.log("888");
};
// 删除选中
const onDelete = () => {
  console.log("999");
};
// 查看详情
const DetailAccount = (id) => {
  console.log(id);
};
//单个删除
const deleteAccount = (id) => {
  console.log(id);
};
// 获取表格列表
const getList = async () => {
  const res = await registerListReq(listFrom);
  console.log(res);
};
watchEffect(getList);
</script>

<style scoped lang="scss">
.parameters {
  width: 100%;
  height: 100%;
  .fenyeqi {
    margin-top: 20px;
  }
}
</style>
